<template>
    <div id="pdfDom" >
        <div style="    width: 900px;margin-left: 50px;text-align: left;">
        <img class="logo" src="../assets/398e36eebda159427c6b73218fe90999_logo.png"/>
        </div>
        <!-- 生成时间 -->
        <div class="time">
           打印凭证日期：{{time}}
        </div>
        <!-- 主要信息 -->
        <div class="main">
            <p class="title">2022年9月三峡大学新生报道凭证</p>
            <div class="detail">
                <p>姓&nbsp;&nbsp;名：&nbsp;&nbsp;{{studentdetail.name}}</p>
                <p>性&nbsp;&nbsp;别：&nbsp;&nbsp;{{(studentdetail.gender==0?'男':'女')}}</p>
                <p>学&nbsp;&nbsp;号：&nbsp;&nbsp;{{studentdetail.number}}</p>
                <p>学&nbsp;&nbsp;院: &nbsp;&nbsp;{{studentdetail.majorGetDTO.academyEntity.name}}</p>
                <p>专&nbsp;&nbsp;业: &nbsp;&nbsp;{{studentdetail.majorGetDTO.name}}</p>
                <p class="billstatus" >缴费凭证：&nbsp;&nbsp;{{active>=3?"已报道":"未报到"}}</p>
                <p class="arrivestatus">报道状态：&nbsp;&nbsp;已报道</p>
                <p >状态更新时间：&nbsp;&nbsp;{{studentdetail.userGetCheckTDO.time}}</p>
                <p class="dormitory">宿 舍 号：&nbsp;&nbsp;{{ studentdetail.dormitoryGetTDO.number == "" ? "未选择宿舍" : studentdetail.dormitoryGetTDO.number }}</p>
                <img src="../assets/g.png" class="img" />
            </div>
           
        </div>
    </div>
</template>
<script>
import htmlToPdf from '../utils/htmlToPdf';

export default {
    components:{
        htmlToPdf
    },
    props:{
        isPdf:false,
        studentdetail:{},
        userdetail:{},
        active:"",
    },
    data(){
        return{
            time:""
        }
    },
    methods:{
        forPDF(){
            this.time=this.getNowTime();
            // console.log(this.getNowTime());
            // console.log(this.time);
            this.$el.querySelector('.time').innerHTML+=this.time;
            // 调用htmlToPdf工具函数
            htmlToPdf.getPdf("我的凭证");
        },
        getNowTime() {
            var date = new Date();
            //年 getFullYear()：四位数字返回年份
            var year = date.getFullYear();  //getFullYear()代替getYear()
            //月 getMonth()：0 ~ 11
            var month = date.getMonth() + 1;
            //日 getDate()：(1 ~ 31)
            var day = date.getDate();
            //时 getHours()：(0 ~ 23)
            var hour = date.getHours();
            //分 getMinutes()： (0 ~ 59)
            var minute = date.getMinutes();
            //秒 getSeconds()：(0 ~ 59)
            var second = date.getSeconds();

            var time = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) + ':' + this.addZero(minute) + ':' + this.addZero(second);
            return time;
        },
        //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        }
    },
    mounted(){
        // console.log(this.active);
        this.studentdetail.bill == 1 ? this.$el.querySelector('.billstatus').innerHTML+="已上传缴费凭证":"未上传缴费凭证";
        this.studentdetail.arrive == 1 ? this.$el.querySelector('.arrivestatus').innerHTML += "已完成报道" : "未完成报道";
        this.studentdetail.dormitory == '' ? this.$el.querySelector('.dormitory').innerHTML += "未选择宿舍" : this.dormitory;
    }
}
</script>
<style scoped>
#pdfDom{
    width: 1000px;
    font-family: '宋体';
}
.logo{
    width: 200px;
}
.time{
    width: 900px;
    height: 50px;
    margin-left: 50px;
    line-height: 50px;
    text-align: right;
}
.main{
    position: relative;
    width: 900px;
    height: 520px;
    margin-left: 50px;
    border: 1px solid;
}
.main .title{
    font-size: 25px;
    margin-bottom: 50px;
    margin-top: 50px;
}
.main .detail{
    text-align: left;
    padding-left: 90px;
}
.main .img{
    position: absolute;
    right: 150px;
    top: 120px;
    width: 120px;
    height: 161px;
    height: 200xp;
}
</style>